<template>
	<div style="background:#F8F8F8;">

		<!-- <div style="background: #11214B;padding: 20px 0;margin-top: 20px;">
			
			<div class="flex flex-col-center" >
				<div  style="color: #fff;margin-right: 10px;">
					工单日期
				</div>
				<div :span="6">
					<el-date-picker
					     v-model="date"
					     type="daterange"
					     range-separator="至"
					     start-placeholder="开始日期"
					     end-placeholder="结束日期">
					   </el-date-picker>
				</div>
			</div>
			 
		</div> -->


		<div class="flex flex-row-between " style="padding: 20px 0;">
			<div style="background: #fff;padding: 20px;width: 500px;">
				<div id="chart_1"></div>
			</div>


			<div style="background: #ffffff;padding: 20px;width:500px;">
				<div id="chart_2"></div>
			</div>


			<div style="background: #fff;padding: 20px;width: 350px;position: relative;">
				<div id="chart_3"></div>
				<div style="position: absolute;left: 50%;top: 50%;transform:translate(-50%,-85%);color: #fff;">
					{{businessNum}}
				</div>
				<div style="color: #333;position: relative;bottom: 65px;left: 120px;">解决率{{rate}}</div>
			</div>


			<div style="background: #fff;padding: 20px;width: 300px;">
				<div id="chart_4"></div>
			</div>
		</div>


		<div style="background: #fff;padding: 20px 0;">
			
			<div class="DatePicker">
				<el-date-picker
				   @change='changeTime'
				   v-model="SelectTime"
				   type="daterange"
				   range-separator="至"
				      start-placeholder="开始日期"
				         end-placeholder="结束日期"
				   >
				 </el-date-picker>
							
			</div>
			 
			
			<el-table :data="list.list" style="width: 100%" v-loading="loading">
				<el-table-column label="历时" width="200">
					<template slot-scope="scope">
						<div class="flex flex-col-center " style="margin-left: 20px;">
							<img v-if="scope.row.status==0" src="@/assets/status_1.png"
								style="width: 30px;height: 30px;" />
							<img v-if="scope.row.status==1" src="@/assets/status.png"
								style="width: 30px;height: 30px;" />
							<img v-if="scope.row.status==2" src="@/assets/status.png"
								style="width: 30px;height: 30px;" />
							<span style="margin-left: 10px;">{{scope.row.duration}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="日期" width="100">
					<template slot-scope="scope">
						{{scope.row.recCreateTime?scope.row.recCreateTime.slice(0,11):''}}
					</template>

				</el-table-column>
				<el-table-column prop="custName" label="客户" >
				</el-table-column>
				<el-table-column prop="productName" label="产品名称" width="80">
				</el-table-column>
				<el-table-column prop="eventName" label="旅程事件"  >
					<template slot-scope="scope">
						<div style="color: #FF1C1C;">{{scope.row.eventName}}</div>
					</template>
				</el-table-column>
				<el-table-column label="币种" width="100">
					<template slot-scope="scope">
						<div>{{scope.row.currencyName}}</div>
					</template>
				</el-table-column>
				<el-table-column label="金额（元）" width="150">
					<template slot-scope="scope">
						<div >{{scope.row.amount}}</div>
					</template>
				</el-table-column>
				<el-table-column label="发起时间" width="150">
					<template slot-scope="scope">
						<div>{{scope.row.recCreateTime?scope.row.recCreateTime.slice(5,16):''}}</div>
					</template>
				</el-table-column>
				<el-table-column label="完成时间" width="150">
					<template slot-scope="scope" v-if="scope.row.status==1">
						<div>{{scope.row.recReviseTime?scope.row.recReviseTime.slice(5,16):''}}</div>
					</template>
				</el-table-column>

				<el-table-column width="400">
					<template slot="header" slot-scope="scope">
						<div class="flex flex-row-around">
							<div style="width: 200px;text-align: center;margin-left: 30px;">
								当前站点
							</div>
							<div style="width: 200px;text-align: center;margin-left: 30px;">
								下一站点
							</div>
						</div>
					</template>
					<template slot-scope="scope">
						<div class="flex  flex-col-center flex-row-between" v-if="scope.row.workList.length" >
							<img src="@/assets/car.png"  style="width: 33px;height: 17px;margin-right: 5px"/>
							<div style="width: 200px;text-align: center;;">
								{{scope.row.taskName }}
							</div>
							<img src="@/assets/right_circle.png"  style="width: 24px;height: 24px;"/>
							<div style="width: 200px;text-align: center;" >
								{{scope.row.nextSite}}
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="详情" width="80">
					<template slot-scope="scope">
						<div class="flex ">
							<!-- <div class="flex">
								<span>客户专员处理</span>
								<span style="margin: 0 10px;">
									<img src="@/assets/right_circle.png" style="width: 24px;height: 24px;" />
								</span>
								<span>风控专员处理</span>
							</div> -->
							<div>
								<el-button style="background: linear-gradient(180deg, #0169FF 0%, #14B7FF 100%);"
									@click="edit(scope.row)" size="small" type="primary">
									详情
								</el-button>
							</div>

						</div>

					</template>
				</el-table-column>
			</el-table>

			<div style="display:flex;justify-content: flex-end;margin: 20px;">
				<basePagination :size="list.size" :page="list.current" :total="list.total" @SizeChange='SizeChange'
					@CurrentChange='CurrentChange' />
			</div>

            <baseStep :detail="detail"  ref='stepChild'></baseStep>
			

		</div>
	</div>
</template>

<script>
	import loader from '@/components/base/basePagination/controls.js';
	import * as echarts from 'echarts';
	import charts_1 from './charts_1.js';
	import charts_2 from './charts_2.js';
	import charts_3 from './charts_3.js';
	import charts_4 from './charts_4.js';
	export default {
		mixins: [loader],

		data() {
			return {
				
				SelectTime:[],
				custId: '',
				date: '',
				limit: 10,
				page: 1,
				list: {
					records: ''
				},
				loading: true,
				
				detail: [],
				
				rate: "",
				businessNum: ''
			}
		},
		created() {
			let time1=this.transFixTime(new Date());
			
			let time2=this.transTime(new Date())
            this.SelectTime=[time1,time2]
		},

		mounted() {
			this.jiazai()
			this.getCharts_1();
			this.getCharts_2()
			this.getCharts_3()
			this.getCharts_4()


			setInterval(()=>{
				this.jiazai()
				this.getCharts_1();
				this.getCharts_2()
				this.getCharts_3()
				this.getCharts_4()
			},60000)

		},
		methods: {
			changeTime(e){
				 let stare=this.transTime(e[0]);
				 let end=this.transTime(e[1]);
				 this.SelectTime=[stare,end];
				 this.page=1;
				 this.jiazai();
			},
			transFixTime(dateTme){
				const Y = dateTme.getFullYear()
				const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMonth() + 1
				const D = dateTme.getDate() < 10 ? "0" + dateTme.getDate() : dateTme.getDate()
				return  Y + "-" + M + "-" + '01'			
			},
			
			transTime(dateTme){
				const Y = dateTme.getFullYear()
				const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMonth() + 1
				const D = dateTme.getDate() < 10 ? "0" + dateTme.getDate() : dateTme.getDate()
				console.log(dateTme.getDate(),88)
				return  Y + "-" + M + "-" + D			
			},
			
			getCharts_1() {
				this.axios.get("/report/business/getBusinessEventTypeNum", ).then(res => {

					let productName = res.data.eventName.splice(0, 10);
					let businessNum = res.data.durationAvg.splice(0, 10);
					let myChart_1 = echarts.init(document.getElementById('chart_1'));
					charts_1.yAxis.data = productName;
					charts_1.series[0].data = businessNum;
					myChart_1.setOption(charts_1);
					//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
					window.addEventListener('resize', function() {
						myChart_1.resize()
					});

				}).catch(error => {})
			},


			getCharts_2() {
				this.axios.get("/report/business/getWorkTimeNum", {}).then(res => {
					let taskName = res.data.taskName.splice(0, 10);
					let timeNum = res.data.timeNum.splice(0, 10);

					let myChart_2 = echarts.init(document.getElementById('chart_2'));
					
					charts_2.xAxis.data = taskName;
					charts_2.series[0].data = timeNum;
					myChart_2.setOption(charts_2);
					window.addEventListener('resize', function() {
						myChart_2.resize()
					});
				}).catch(error => {})
			},


			getCharts_3() {
				this.axios.get("/report/business/getBusinessMonthNum", {}).then(res => {
					let taskName = res.data.endNum;
					let timeNum = res.data.notNum;
					let myChart_3 = echarts.init(document.getElementById('chart_3'));
					charts_3.series[0].data[0].name = "已完成  " + taskName,
						charts_3.series[0].data[0].value = taskName,
						charts_3.series[0].data[1].name = "未完成  " + timeNum;
					charts_3.series[0].data[1].value = timeNum;
					this.businessNum = res.data.businessNum
					this.rate = res.data.endRate
					console.log(charts_3)
					myChart_3.setOption(charts_3);
					window.addEventListener('resize', function() {
						myChart_3.resize()
					});
				}).catch(error => {})

			},
			getCharts_4() {
				this.axios.get("/report/business/getYearBussinessNum", {}).then(res => {
					let monthList = res.data.monthList;
					let timeNum = res.data.notNum;
					let thisNum = res.data.thisNum;
					let lastNum = res.data.lastNum;
					let myChart_4 = echarts.init(document.getElementById('chart_4'));
					charts_4.xAxis.data = monthList;

					charts_4.series[0].data = thisNum;
					charts_4.series[1].data = lastNum;

					myChart_4.setOption(charts_4);
					window.addEventListener('resize', function() {
						myChart_4.resize()
					});
				}).catch(error => {})

			},


			edit(item) {
				
				this.axios.get("/report/business/getWorkMap", {
					params:{
						uniqueCode: item.uniqueCode
					}
					
				}).then(res => {
				  let currentList=res.data.currentList;
					if (!currentList.length) {
						this.$message.error({
							message: "暂无流程",
							center: true
						})
						return
					}
					
					var arr= [];
					for(var i=0;i<currentList.length;i+=4){
					    arr.push({arr: currentList.slice(i,i+4)});
					}
				
					this.detail = arr;
					this.$refs.stepChild.dialogVisible=true
				
				}).catch(error => {})
				
			},
			SizeChange(e) {
				this.loading = true;
				this.limit = e.size;
				this.jiazai();
			},
			CurrentChange(e) {
				this.loading = true;
				this.page = e.page;
				this.jiazai();
			},
			jiazai() {
				this.axios.get("/report/business/getBusinessList", {
					params: {
						custId: '',
						limit: this.limit,
						page: this.page,
						startTime:this.SelectTime[0],
						endTime:this.SelectTime[1]
					}
				}).then(res => {

					this.list = res.data;
					this.loading = false;
				}).catch(error => {})
			}
		},

	}
</script>
<style style="scss">
	#chart_1 {
		width: 500px;
		height: 400px;
		margin: 0 auto;
	}

	#chart_2 {
		width: 500px;
		height: 400px;
		margin: 0 auto;
	}

	#chart_3 {
		width: 350px;
		height: 400px;
		margin: 0 auto;
	}

	#chart_4 {
		width: 300px;
		height: 400px;
		margin: 0 auto;
	}

	.el-table tr {
		background: #F0F5FA !important;
		color: #3EA3FF;
	}

	.el-table th {
		background: #D9ECFF !important;
	}

	.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: 1px solid rgba(108, 157, 255, 0.39);
	}


	.el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: rgba(197, 223, 255, 0.4) !important;
	}

	/* .el-dialog,
	.el-pager li {
		background: #0E214F !important;

	}
 */
	/* 	.el-range-separator,
	.el-date-editor,
	.el-range-input {
		color: #fff !important;
	}

	.el-input__inner,
	.el-range-input {
		background: transparent
	}

	.el-pagination__total,
	.el-pager li,
	.el-pagination__sizes,
	.el-input,
	.el-input__inner,
	.el-pagination__jump {
		color: #fff;
	} */

	.el-message {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		z-index: 999 !important;
	}

	
	.DatePicker{
		margin:0 auto 20px auto;
		width: 300px;
		text-align: center;
	}
	.DatePicker .el-input__inner  {
		border: 2px solid #3EA3FF;
		color: #3EA3FF!important;
	}
	
	.DatePicker .el-range-input , .el-range-separator , .el-range__icon {
		
		color: #3EA3FF!important;
	}
</style>
